<template>
  <div class="index">
    <div class="header">
      <div class="title">
        俯瞰 OVERLOOK
        <el-button type="primary" @click="gotoHome" class="toHomeButton"
          >退出登录</el-button
        >
      </div>
    </div>
    <div class="line"></div>
    <el-container>
      <el-aside>
        <el-menu
          class="el-menu-vertical-demo"
          :default-active="this.$route.path"
          router="true"
        >
          <el-menu-item index="/checkSystem">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-menu"></i>
              <span slot="title">系统几何级校正</span>
            </div>
          </el-menu-item>
          <el-menu-item index="/checkphoto">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-menu"></i>
              <span slot="title">控制点几何校正</span>
            </div>
          </el-menu-item>
          <el-menu-item index="/toGCPEditor">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-setting"></i>
              <span slot="title">控制点标注采集</span>
            </div>
          </el-menu-item>
          <el-menu-item index="/index">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-menu"></i>
              <span slot="title">图像重建与分解</span>
            </div>
          </el-menu-item>
          <el-menu-item index="/showMap">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-menu"></i>
              <span slot="title">数据查看与呈现</span>
            </div>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main>
        <el-card class="box-card" v-loading="aloading">
          <div
            class="selectImg"
            style="display: flex; margin-top: 20px; margin-left: 20px"
          >
            <div style="width: 150px; text-align: right">选择图片：</div>
            <div class="fileBox" style="margin-left: 20px; margin-top: 10px">
              选择文件
              <input
                id="img"
                type="file"
                name="image"
                multiple="multiple"
                style="margin-top: 0px; margin-left: 38px"
              />
            </div>
          </div>
          <div
            class="selectTxt"
            style="display: flex; margin-top: 20px; margin-left: 20px"
          >
            <div style="width: 150px; margin-top: 10px; text-align: right">
              选择控制点文件：
            </div>
            <div class="fileBox" style="margin-left: 20px">
              选择文件
              <input
                id="txt"
                type="file"
                name="image"
                multiple="multiple"
                style="margin-top: 0px; margin-left: 20px"
              />
            </div>
          </div>
          <el-button
            class="uploadButton"
            @click="uploadFile()"
            type="primary"
            size="small"
            >上传图片</el-button
          >
          <el-button
            class="uploadButton"
            @click="downloadFile()"
            type="primary"
            size="small"
            >下载图片</el-button
          >

          <el-button
            @click="gotoShowMap()"
            size="small"
            type="success"
            class="resultButton"
            >查看结果</el-button
          >
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<style src="../assets/css/Index.css" scoped >
</style>
<style scoped>
.el-card {
  margin-top: 5%;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
}
</style>

</style>
<script>
import axios from "axios";
import { request, request1 } from "../network/request.js";
export default {
  data() {
    return {
      aloading: false,
      // fileList: null,
      // activeIndex: ref("/checkphoto"),
      input: "",
      gcpNum: "",
      latitude: "",
      longitude: "",
      address: "",
    };
  },
  methods: {
    forceUpdate() {
      this.$forceUpdate();
    },
    async uploadFile() {
      var uuid;
      var img = document.getElementById("img").files;
      var txt = document.getElementById("txt").files;
      console.log(img);
      console.log(txt);
      if (img.length == 0) {
        this.$message({
          message: "请选择图片",
          type: "error",
        });
        return;
      }
      if (txt.length == 0) {
        this.$message({
          message: "请选择控制点文件",
          type: "error",
        });
        return;
      }

      var images = new FormData();

      images.append("gcpNum", this.input);
      //add images
      for (var i = 0; i < img.length; i++) {
        images.append("images", img[i]);
      }
      for (var i = 0; i < txt.length; i++) {
        images.append("images", txt[i]);
      }

      console.log(images);
      this.aloading = true;
      await axios
        .post("http://10.132.20.144:8001/checkPhoto", images)
        .then((response) => {
          //成功时服务器返回 response 数据
          console.log(response.data);
          this.address = response.data.address;
          this.latitude = response.data.latitude;
          this.longitude = response.data.longitude;
          console.log(this.address);
          console.log(this.latitude);
          console.log(this.longitude);
          this.aloading = false;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    downloadFile() {
      var url = "http://10.132.20.144:8001/static/checkphoto/out.tif";
      let link = document.createElement("a"); //创建a标签
      link.style.display = "none"; //使其隐藏
      link.href = url; //赋予文件下载地址
      link.setAttribute("download", "result.tif"); //设置下载属性 以及文件名
      document.body.appendChild(link); //a标签插至页面中
      link.click(); //强制触发a标签事件
      document.body.removeChild(link);
      // this.loading = true;
    },
    jump2() {
      // window.location.href = "http://10.132.20.144:4200/";
      window.open("http://10.132.20.144:4200/");
    },
    getFile2(event) {
      const formData = new FormData();
      console.log(event.target.files);
      for (var f of event.target.files) {
        // this.filelist.push(f);
        console.log(event.target.files);
        formData.append("images", f);
      }
      console.log(formData);
      for (var value of formData.values()) {
        console.log(value);
      }
      const option = {
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
        data: formData,
        url: "/receiveImg",
      };
      request(option).then((res) => {
        console.log(res);
      });
    },
    gotoShowMap() {
      this.$router.push({
        path: "/showMap",

        query: {
          address: this.address,
          latitude: parseFloat(this.latitude),
          longitude: parseFloat(this.longitude),

          // address:
          //   "http://10.132.20.144:8001/static/d160924c-1c5a-45b0-bc79-c491ddea74ba/{z}/{x}/{y}.png",
          // latitude: parseFloat("34.03471583263848"),
          // longitude: parseFloat("108.75973423429322"),
        },
      });
    },
  },
  created() {},
};
</script>